<!-- 自定义表单核销 -->
<template>
    <div id="growthPoolSearch">
        <c-title :hide="false" text="搜索"></c-title>
        <van-sticky>
            <van-search v-model="keyword" placeholder="请输入内容" @search="onSearch"> </van-search>
        </van-sticky>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div class="gird-2 padding-10 t-l" style="grid-row-gap: 10px;grid-column-gap: 10px;">
                    <div v-for="item in list" :key="item.id" class="flex-column list-item" @click="toUrl('goods', { id: item.id })">
                        <div class="w-h-100">
                            <img :src="item.thumb">
                        </div>
                        
                        <div class="padding-10 flex-column f-grow-1">
                            <div class="title color-000000 f-14 line-clamp-2">{{ item.title }}</div>
                            <div class="f-grow-1"></div>
                            <div class="margin-top-2 flex-column f-12 themeColor" v-if="item.goods_content_show">
                                <div class="flex"  v-for="child in item.goods_content_show">
                                    {{ child.name }} {{ child.value }}
                                </div>
                            </div>
                            <div v-if="item.price" class="f-16 f-bold flex-a-c themeColor margin-top-4">
                                <div class="f-11" style="font-weight: 400;">￥</div>{{ item.price }}
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
export default {
    data() {
        return {
            keyword: "",
            loading: false,
            finished: false,
            refreshing: false,
            total_page: 0,
            page: 1,
            list: []
        };
    },

    activated() { },

    components: {},

    computed: {},

    mounted() { },

    methods: {
        getData() {
            $http
                .get("plugin.growth-pool.frontend.goods.index", { keyword: this.keyword, page: this.page, store_id: this.$route.params.store_id })
                .then(response => {
                    this.refreshing = false;
                    this.loading = false;
                    if (response.result === 1) {
                        if (this.page == 1) {
                            this.list = [];
                        }
                        this.list = this.list.concat(response.data.data);
                        this.total_page = response.data.last_page;
                        this.page = this.page + 1;
                        if (response.data.current_page == response.data.last_page) {
                            this.finished = true;
                        }
                    } else {
                        this.$toast(response.msg);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        initData() {
            this.loading = true;
            this.finished = false;
            this.page = 1;
            this.list = [];
        },
        onRefresh() {
            this.initData();
            this.getData();
        },
        onLoad() {
            this.getData();
        },
        onSearch() {
            this.initData();
            this.getData();
        },
        toUrl(_name, _params = {}, _query = {}) {
            if (_name) this.$router.push(this.fun.getUrl(_name, _params, _query));
        }
    }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#growthPoolSearch {
    .list-item {
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        width: 100%;
    }
    .w-h-100 {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      position: relative;
      img {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }
    }
}
</style>